<template>
  <div>
    <div class="permissManaTool">
      <el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
        <template slot="prepend">ROLE_</template>
      </el-input>
      <el-input size="small" placeholder="请输入角色中文名" v-model="role.remark" @keydown.enter.native="doAddRole"></el-input>
      <el-button size="small" type="primary" icon="el-icon-plus" @click="doAddRole">添加角色</el-button>
    </div>
    <div class="permissManaMain">
      <el-collapse accordion @change="change" v-model="acticvName">
        <el-collapse-item :title="r.remark" :name="r.id" v-for="(r, index) in roles" :key="index">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>可访问资源</span>
              <el-button style="float: right; padding: 3px 0; color: red;" type="text" 
                         icon="el-icon-delete" @click="doDeleteRole(r)">
              </el-button>
            </div>
            <div>
              <el-tree :data="allMenus" :props="defaultProps" show-checkbox
                node-key="id" :default-checked-keys="selectedMenus"
                ref="tree" :key="index">
              </el-tree>
              <div style="display: flex; justify-content: flex-end;">
                <el-button size="mini" @click="cancelUpdate">取消修改</el-button>
                <el-button size="mini" type="primary" @click="doUpdate(r.id, index)">确认修改</el-button>
              </div>
            </div>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'PermissMana',
    data(){
      return {
        role: {  //添加角色
          name: '',
          remark: ''
        },
        roles: [],  //所有角色
        allMenus: [],  //权限树
        defaultProps: {  //决定子树、展示名称
          children: 'children',
          label: 'name'
        },
        selectedMenus: [],
        acticvName: -1
      }
    },
    methods: {
      initRoles(){
        this.getRequest('/system/basic/permiss/getAllRoles').then(resp=>{
          if(resp){
            this.roles = resp.obj;
          }
        })
      },
      initAllMenu(){
        this.getRequest('/system/basic/permiss/menus').then(resp=>{
          if(resp){
            this.allMenus = resp.obj
          }
        })
      },
      // 添加角色 
      doAddRole(){
        if(this.role.name && this.role.remark){
          this.postRequest('/system/basic/permiss/',this.role).then(resp=>{
            if(resp){
              this.initRoles();
              this.role.name = '';
              this.role.remark = '';
            }
          })
        }else{
          this.$message.error('所有字段不能为空 ')
        }
      },
      // 删除角色
      doDeleteRole(role){
        this.$confirm('此操作将永久删除[ '+role.remark+' ]角色，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/system/basic/permiss/'+role.id).then(resp=>{
            if(resp){
              // 刷新列表
              this.initRoles();
            }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      change(rid){  //监听是否打开折叠卡
        if(rid){
          // console.log(rid);
          this.initAllMenu();
          this.initSelectedMenus(rid);
        }
      },
      // 根据用户id查询角色权限
      initSelectedMenus(rid){
        this.getRequest('/system/basic/permiss/mid/'+rid).then(resp=>{
          if(resp){
            this.selectedMenus = resp.obj;
          }
        })
      },
      // 修改权限
      doUpdate(rid, index){
        let tree = this.$refs.tree[index];
        let selectedKeys = tree.getCheckedKeys(true); //获取选中的节点
        console.log(selectedKeys);
        // 注意这里后端参数为rId、menuIds
        let url = '/system/basic/permiss/updateMenuRoles/?rId='+rid;
        selectedKeys.forEach(key=>{
          url += '&menuIds='+key;
        })
        this.putRequest(url).then(resp=>{
          if(resp){
            this.initRoles();
            this.acticvName = -1;
          }
        })
      },
      cancelUpdate(){
        this.acticvName = -1;
      }
    },
    mounted(){
      this.initRoles();
    }
  }
</script>

<style scoped>
  .permissManaTool{
    display: flex;
    justify-content: flex-start;
  }
  .permissManaTool .el-input{
    width: 300px;
    margin-right: 8px;
  }
  .permissManaMain{
    margin-top: 10px;
    width: 700px;
  }
</style>